<template>
    <div>
        <div class="top-panel">
            <el-card>
                <el-form :model="searchForm" label-width="70px" label-position="right">
                    <el-row>
                        <el-col :span="5">
                            <el-form-item label="分类名">
                                <el-input class="password-input" v-model="searchForm.nameFuzzy" clearable
                                    placeholder="支持模糊搜索" @keyup.enter.native="loadDataList"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="描述">
                                <el-input class="password-input" v-model="searchForm.descriptionFuzzy" clearable
                                    placeholder="支持模糊搜索" @keyup.enter.native="loadDataList"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="状态">
                                <el-select v-model="searchForm.status" placeholder="请选择状态">
                                    <el-option label="启用" :value="1"></el-option>
                                    <el-option label="禁用" :value="0"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4" :style="{ paddingLeft: '10px' }">
                            <el-button type="success" @click="loadDataList()">查询</el-button>
                            <el-button type="info" @click="reset()">重置</el-button>
                            <el-button type="primary" @click="openAddOrUpdata(null)">新增</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>
        </div>
        <el-card class="table-data-card">
            <template #header>
                <span>分类列表</span>
            </template>
            <Table ref="tableInfoRef" :columns="columns" :fetch="loadDataList" :dataSource="tableData"
                :options="tableOptions" :extHeight="tableOptions.extHeight" @row-click="handleRowClick">
                <template #operation="{ index, row }">
                    <div class="row-op-panel">
                        <a class="a-link" href="javascript:void(0)"
                            @click="classifiedManagement(row, row.statusName == '启用' ? 0 : 1)">
                            {{ row.statusName == '启用' ? '禁用' : '启用' }}
                        </a>
                        <a class="a-link" href="javascript:void(0)" @click.prevent="openAddOrUpdata(row)">编辑</a>
                        <a class="a-link" href="javascript:void(0)" @click.prevent="classifiedManagement(row, 2)">删除</a>
                    </div>
                </template>
            </Table>
        </el-card>

        <FormDialog ref="formDialogRef" :title="dialogTitle" :form-model="formModel" :rules="rules"
            @submit="handleSubmit">
            <el-form-item label="分类名称" prop="name">
                <el-input v-model="formModel.name" placeholder="请输入分类名称" />
            </el-form-item>

            <el-form-item label="状态" prop="status">
                <el-select v-model="formModel.status" placeholder="请选择状态">
                    <el-option label="启用" :value="1"></el-option>
                    <el-option label="禁用" :value="0"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="排序" prop="sortOrder"> <el-input-number v-model="formModel.sortOrder" :min="0" :step="1"
                    placeholder="请输入排序值" /> </el-form-item>

            <el-form-item label="描述" prop="description">
                <el-input type="textarea" v-model="formModel.description" placeholder="请输入描述" :rows="3" />
            </el-form-item>

        </FormDialog>
    </div>
</template>
<script setup>

import FormDialog from '@/components/FormDialog.vue';
import { getCurrentInstance, nextTick, ref } from 'vue';

import axios from 'axios'

const { proxy } = getCurrentInstance()

const userInfo = proxy.VueCookies.get("userInfo")

const searchForm = ref({})
const tableData = ref({})
const tableOptions = ref({
    extHeight: 125
})

const api = {
    // 获取分类列表
    loadDataList: '/tuanCategories/loadDataList',
    // 新增修改分类
    addOrUpdateCate: '/tuanCategories/addOrUpdateCate',
    // 启用分类
    enabled: '/tuanCategories/enabled',
    // 禁用分类
    disable: '/tuanCategories/disable',
    // 删除分类
    delCategories: '/tuanCategories/delCategories'
}

const columns = [
    {
        label: "商家",
        prop: "merchantId",
    },
    {
        label: "分类名称",
        prop: "name",
    },
    {
        label: "分类描述",
        prop: "description",
    },
    {
        label: "状态",
        prop: "statusName",
    },
    {
        label: "创建时间",
        prop: "updatedAt",
    },
    {
        label: "更新时间",
        prop: "updatedAt",
    },
    {
        width: 150,
        label: "操作",
        scopedSlots: "operation"
    }
]

const loadDataList = async () => {
    let params = {
        pageNo: tableData.value.pageNo,
        pageSize: tableData.value.pageSize,
    }

    Object.assign(params, searchForm.value)
    let result = await proxy.Request({
        url: api.loadDataList,
        params,
    })

    if (!result) {
        return
    }

    Object.assign(tableData.value, result.data)

    console.log(result);

}

const tableInfoRef = ref()

// 重置方法
const reset = () => {
    searchForm.value = {
        nickNameFuzzy: '',
        storeNameFuzzy: '',
        contactNameFuzzy: ''
    }
    loadDataList()
}


// 分类管理 status: 0 禁用 1 启用 2 删除
const classifiedManagement = async (data, status) => {
    let params = {
        id: data.id
    }
    let url = null
    let message = null

    if (status === 0) {
        url = api.disable
        message = "确定禁用分类吗?"
    } else if (status === 1) {
        url = api.enabled
        message = "确定启用分类吗?"
    } else {
        url = api.delCategories
        message = "确定删除分类吗?"
    }
    proxy.Confirm(message, async () => {
        let result = await proxy.Request({
            url,
            params,
        })
        if (!result) {
            return
        }

        if (result.code === 200) {
            proxy.$message.success("操作成功");
            loadDataList()
        }
    })
}

// 新增修改操作
const formDialogRef = ref(null)
const dialogTitle = ref('')

const formModel = ref({})

const rules = {
    name: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
    status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
    sortOrder: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
    description: [{ required: true, message: '分类描述不能为空', trigger: 'blur' }],
}

// 新增或修改按钮
const openAddOrUpdata = (row) => {
    if (row == null) {
        dialogTitle.value = '新增分类'
        formModel.value = {
            status: 1, // 默认启用
            sortOrder: 0,
            name: '',
            description: ''
        }
        nextTick(() => formDialogRef.value.open('bounce'))
    } else {
        dialogTitle.value = '编辑分类'
        formModel.value = { ...row }
        nextTick(() => formDialogRef.value.open('bounce'))
    }
}

// 执行新增或修改
const handleSubmit = async () => {
    try {
        let params = Object.assign(formModel.value);
        const result = await proxy.Request({
            url: api.addOrUpdateCate,
            params,
        })
        if (result && result.code === 200) {
            proxy.$message.success('操作成功')
            formDialogRef.value.close()  // 请求成功才关闭
            loadDataList()               // 刷新列表
        } else {
            proxy.$message.error(result?.msg || '操作失败')
        }
    } catch (error) {
        proxy.$message.error('请求异常，请重试')
        console.error(error)
    }
}
</script>

<style lang="scss" scoped>
.detail-tree-panel {
    height: calc(100vh - 273px);
    overflow: auto;
    width: 100%;
}
</style>